import router, { asyncRoutes } from './router'
import store from '@/store'
import { Message } from 'element-ui'
// 导入进度条插件
import NProgress from 'nprogress'
// 导入进度条样式
import 'nprogress/nprogress.css'
// 导入设置标题的方法
import getPageTitle from '@/utils/get-page-title'

const whiteList = ['/login', '/404'] // no redirect whitelist

router.beforeEach(async(to, from, next) => {
  NProgress.start()
  // 获取token
  const hasToken = store.getters.token
  if (hasToken) {
    // 判断是否去登录页
    if (to.path === '/login') {
      next('/') // 强制跳转到首页
      NProgress.done() // 重定向会再走一次路由守卫,在开启一次进度条,此时需要手动关闭进度条
    } else {
      // 先next(),否则token过期,带回的未遂地址不是要跳转的地址
      next()
      if (!store.getters.name) {
        await store.dispatch('user/getUserInfoActions')
      }
      // 判断动态路由标记为false的时候,动态添加路由并将标记设置为true
      if (!store.getters.asyncRoutes) {
        store.commit('app/SET_ASYNCROUTES') // 设置路由标记
        const menus = store.getters.menus // 获取用户动态路由信息
        // 筛选出在用户信息里的路由对象
        const filterRoutes = asyncRoutes.filter(item => {
          return menus.includes(item.children[0].name.toLowerCase())
        })
        // 动态添加路由对象
        router.addRoutes(filterRoutes)
        // 将404页面添加到动态路由的最后
        filterRoutes.push({ path: '*', redirect: '/404', hidden: true })
        // 把动态路由添加到vuex中
        store.commit('permission/setRoutes', filterRoutes)
        // 重定向到要去的地址,解决动态路由页面刷新后的bug
        next({
          path: to.path,
          replace: true // 不可以回退
        })
      }
    }
  } else { // 未登录
    if (whiteList.includes(to.path)) {
      next() // 在白名单里直接放行
    } else {
      next('/login') // 跳转到登录页
      NProgress.done()
      Message.warning('请先登录')
    }
  }
})
// 后置守卫
router.afterEach((to, from) => {
  NProgress.done()
  // 调用拼接标题的方法设置title
  document.title = getPageTitle(to.meta.title)
})
